"use server";
import { Flex, Menu, message, Space } from "antd";
import {
  getQuestionHotUsingPost,
  getQuestionVoByIdUsingGet,
} from "@/api/questionController";
import "./index.css";
import QuestionCard from "@/components/QuestionCard";
import Sider from "antd/es/layout/Sider";
import Title from "antd/es/typography/Title";
import { Content } from "antd/es/layout/layout";
import Link from "next/link";
import { FireOutlined } from "@ant-design/icons";

/**
 * 题库题目详情页
 * @constructor
 */
export default async function QuestionPage({ params }) {
  const { questionId } = params;

  // 获取题目详情
  let question = undefined;
  try {
    const res = await getQuestionVoByIdUsingGet({
      id: questionId,
    });
    question = res.data;
  } catch (e) {
    message.error("获取题目详情失败，" + e.message);
  }
  // 错误处理
  if (!question) {
    return <div>获取题目详情失败，请刷新重试</div>;
  }

  let hots = undefined;
  // 获取热门题目列表
  let bank = undefined;
  try {
    const res = await getQuestionHotUsingPost();
    bank = res.data;
    console.log(res);
  } catch (e) {
    message.error("获取题库列表失败，" + e.message);
  }
  //题目菜单列表
  const questionMenuItemList = (bank || []).map((q) => {
    return {
      label: <Link href={`/question/${q.id}`}>{q.title}</Link>,
      key: q.id,
    };
  });

  return (
    <div id="questionPage">
      <Flex gap={24}>
        <Sider width={240} theme="light" style={{ padding: "24px 0" }}>
          <Title level={4} style={{ marginLeft: 10 }}>
            热门题目榜
            <Space
              style={{
                color: "#ff7b00", // 使用亮橙色
                fontWeight: 600, // 加粗字体
                fontSize: "14px", // 文字尺寸
                alignItems: "center", // 垂直居中
                cursor: "pointer", // 手型光标
              }}
            >
              <FireOutlined style={{ fontSize: "16px" }} />
              <span>HOT</span>
            </Space>
          </Title>
          <Menu items={questionMenuItemList} selectedKeys={[question.id]} />
        </Sider>
        {/*这里是右边*/}
        <Content>{<QuestionCard question={question} />}</Content>
      </Flex>
    </div>
  );
}
